{extend name="base"/}
{block name="main"}
<style>
	input[type="checkbox"] + label::before {
		content: "\a0";  /*不换行空格*/
		display: inline-block;
		vertical-align: .2em;
		height: 18px;
		width: 18px;
		font-size: 22px;
		margin-right: .2em;
		border-radius: .2em;
		background-color: white;
		border: 1px solid #93a1a1;
		text-indent: .15em;
		line-height: .65;  /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
	}
	input[type="checkbox"]:checked + label::before {
		content: "\2714";
		background-color:#00a0e9;
		color: white;
		height: 18px;
		width: 18px;
		font-size: 22px;
	}
	input[type="checkbox"] {
		position: absolute;
		clip: rect(0, 0, 0, 0);
		cursor:pointer;
	}
</style>
<article class="cl pd-20">
	<div id="tab_demo" class="HuiTab" style="margin-bottom: 15px;">
		<div class="tabBar clearfix">
			<span onclick="window.location.href='{:url('goods/goods_spec')}'">规格列表</span>
			<span class="current" onclick="window.location.href='{:url('goods/goods_spec_add')}'">添加规格</span>
		</div>
	</div>
	<form action="" method="post" class="form form-horizontal" id="">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>规格名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" autocomplete="off" value="" placeholder="规格名称" class="input-text" id="spec_name">
				<p class="error">请输入规格名称</p>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>规格排序：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" autocomplete="off" value="0" placeholder="规格排序" class="input-text" id="sort">
				<p class="error">请输入规格排序</p>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">是否启用：</label>
			<div class="formControls col-xs-8 col-sm-9">
					<input type="checkbox" id="is_visible" checked="checked">
					<label for="is_visible">&nbsp;</label>
			</div>
		</div>
		<div class="row cl" id="att">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>规格值：</label>
			<div class="formControls col-xs-8 col-sm-9 spec_data">
				<input type="text" autocomplete="off" value="" placeholder="" class="input-text" name="spec_value" id="spec_value">
				<div class="inline-block w19"><a style="color: #00a2d4" href="javascript:;" onclick="delSpecValue(this)">删除</a></div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"></label>
			<div class="formControls col-xs-8 col-sm-3">
				<a href="javascript:;" onclick="addSpecValue(this)"><i class="Hui-iconfont">&#xe600;</i>添加一个规格值</a>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" onclick="addSuppAjax()" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>
</article>
{/block}
{block name="script"}
<script type="text/javascript">
$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
});
//添加一个规格值
function addSpecValue(e){
var html= '<div class="w100">';
	html+='<label class="form-label col-xs-4 col-sm-3"></label>';
    html+='<div class="formControls col-xs-8 col-sm-9 spec_data">';
    html+='<input type="text" autocomplete="off" value="" placeholder="" class="input-text" name="spec_value" id="spec_value">';
    html+='<div class="inline-block w19"><a style="color: #00a2d4" href="javascript:;" onclick="delSpecValue(this)">删除</a></div>';
    html+='</div>';
    html+='</div>';
   $("#att").append(html);
}
//删除一个规格值
function delSpecValue(e){
        $(e).parents('.w100').remove();
}
var flag = false;//防止重复提交
//添加
function addSuppAjax() {
    var spec_name = $("#spec_name").val();
    var sort = $("#sort").val();
    var cate_id = $("#cate_id").val();
    var spec_value_obj = $("input[name='spec_value']");
    var spec_value_str = '';
    spec_value_obj.each(function(i){
        if(spec_value_obj.eq(i).val() != ''){
            spec_value_str += ',' + spec_value_obj.eq(i).val();
        }
    });
    spec_value_str = spec_value_str.substr(1);
    if ($("#is_visible").prop("checked")) {
        var is_visible = 1;
    } else {
        var is_visible = 0;
    }
    if(spec_name == ''){
        layer.msg('规格名称不能为空',{icon:5,time:1000});
        return false;
    }
    if(cate_id == '-1'){
        layer.msg('请选择商品分类',{icon:5,time:1000});
        return false;
    }
    if(sort == ''){
        layer.msg('排序不能为空',{icon:5,time:1000});
        return false;
    }
    if(flag){
        return;
    }
     flag = true;
        $.ajax({
            type : "post",
            url : "{:url('goods/goods_spec_add')}",
            data : {
                'spec_name' : spec_name,
                'sort' : sort,
                'is_visible' : is_visible,
                'spec_value_str' : spec_value_str,
                'cate_id' : cate_id,
            },
            success : function(data) {
                if(data['code']>0){
                    layer.msg('添加成功!',{icon:1,time:1000},function () {
                        window.parent.location.href="{:url('goods/goods_spec')}";
                    });
                }
                else{
                    flag = false;
                    layer.msg(data['message'],{icon:5,time:1000});
                }
            }
        });
}
</script>
{/block}